<template>
	<div class="app-container">
		<div class="row">
			<span class="left-label">关键字</span>
			<el-input v-model="queryData.procureOrCustomerName" style="width: 200px; margin-right: 20px" placeholder="请输入关键字" />
			<span class="left-label">合同编号</span>
			<el-input v-model="queryData.treatyCode" style="width: 200px; margin-right: 20px" placeholder="请输入合同编号" />
			<span class="left-label">项目编号</span>
			<el-input v-model="queryData.projectCode" style="width: 200px; margin-right: 20px" placeholder="请输入项目编号" />
			<span class="left-label">合同类别</span>
			<el-select v-model="queryData.treatyCategory" placeholder="请选择" size="default" clearable class="select">
				<el-option v-for="dict in treaty_category" :key="dict.value" :label="dict.label" :value="dict.value" />
			</el-select>
			<br />
			<span class="left-label">时间筛选</span>
			<el-date-picker
				v-model="queryData.teststartTime"
				style="width: 356px; margin-right: 10px; margin-top: 10px"
				value-format="YYYY-MM-DD"
				type="daterange"
				range-separator="-"
				start-placeholder="开始时间"
				end-placeholder="结束时间"></el-date-picker>
		</div>
		<div class="row">
			<span class="left-label"></span>
			<el-button type="primary" @click="search">搜索</el-button>
			<el-button type="primary" @click="reset">重置</el-button>
			<el-button v-if="userStore.$state.roles.includes('yw2')" @click="addhetong">创建合同</el-button>
		</div>
		<BaseTable v-loading="loading" :columns="columns" :dataList="dataList">
			<template #treatyName="{ row }">
				<span style="cursor: pointer; color: #409eff" @click="toDetail(row)">{{ row.treatyName }}</span>
			</template>
			<template #projectCode="{ row }">
				<span style="cursor: pointer; color: #409eff" @click="toProjectDetail(row.projectId)">{{ row.projectCode }}</span>
			</template>
		</BaseTable>
		<pagination :total="total" v-model:page="queryData.pageNum" v-model:limit="queryData.pageSize" @pagination="search" />
		<!-- 合同审核 -->
		<el-dialog :title="`合同审核`" v-model="open" width="800px" append-to-body :close-on-click-modal="false" destroy-on-close>
			<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
				<el-form-item prop="treatyStatus" label="审核">
					<el-radio-group v-model="form.treatyStatus">
						<el-radio label="2">审核通过</el-radio>
						<el-radio label="3">审核不通过</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item prop="treatyNote" label="审核备注">
					<el-input v-model="form.treatyNote" :rows="5" type="textarea" style="margin-bottom: 5px" placeholder="审核备注" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div style="text-align: right">
					<el-button type="primary" @click="submitAdd">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import BaseTable from '@/components/BaseTable'
import { listContractManagement, delTreaty, sendPiao, updateTreaty } from '@/api/project/project'
import useUserStore from '@/store/modules/user'
import { useRoute } from 'vue-router'
const route = useRoute()

const { proxy } = getCurrentInstance()
const { project_status, treaty_category } = proxy.useDict('project_status', 'treaty_category')

const router = useRouter()
const userStore = useUserStore()
const queryData = reactive({
	pageNum: 1,
	pageSize: 100,
	procureOrCustomerName: undefined,
	treatyCode: undefined,
	projectCode: undefined,
	treatyCategory: undefined,
	teststartTime: undefined,
	createUserCode: route.query.createUserCode,
	resource: route.query.resource
})
const columns = ref([
	{ key: 1, width: '120', label: `编号`, prop: 'treatyCode', type: 'text', visible: true },
	{ key: 2, label: `名称`, prop: 'treatyName', type: 'custom', visible: true },
	{ key: 9, width: '120', label: `合同类别`, prop: 'treatyCategory', type: 'select', data: treaty_category, visible: true },
	{ key: 3, width: '120', label: `项目编号`, prop: 'projectCode', type: 'custom', visible: true },
	{ key: 5, width: '150', label: `日期`, prop: 'treatyTime', type: 'date', visible: true },
	{ key: 6, width: '120', label: `合同金额`, prop: 'treatyTotalMoney', type: 'text', visible: true },
	{ key: 7, width: '120', label: `审计金额`, prop: 'treatyAuditMoney', type: 'text', visible: true },
	{ key: 10, width: '130', label: `状态`, prop: 'treatyStatus', type: 'select', data: project_status, visible: true }
])
const total = ref(0)
const dataList = ref([{}])
const loading = ref(false)
const search = () => {
	const querys = toRaw(queryData)
	const obj = { ...querys }
	if (obj.teststartTime) {
		obj.startTime = obj.teststartTime[0]
		obj.endTime = obj.teststartTime[1]
		obj.teststartTime = undefined
	}
	loading.value = true
	listContractManagement(obj).then((res) => {
		total.value = res.total
		dataList.value = res.rows
		loading.value = false
	})
}
search()
const reset = () => {
	queryData.procureOrCustomerName = ''
	queryData.treatyCode = ''
	queryData.projectCode = ''
	queryData.treatyCategory = ''
}
const addhetong = () => {
	router.push({
		path: '/project/contractAdd'
	})
}

const toDetail = (row) => {
	router.push({
		path: '/project/contractDetail',
		query: { id: row.treatyId }
	})
}
const toProjectDetail = (id) => {
	router.push({
		path: '/project/information',
		query: { id: id }
	})
}
const form = reactive({
	projectId: '',
	treatyId: '',
	treatyNote: '',
	treatyStatus: ''
})
const rules = {
	treatyStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }]
}
const open = ref(false)

const baseform = ref()
const submitAdd = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			updateTreaty(form).then((res) => {
				search()
				proxy.$modal.msgSuccess('审核成功！')
				open.value = false
			})
		}
	})
}
const cancel = () => {
	for (let item in form) {
		form[item] = ''
	}
	open.value = false
}
// const fapiao = (row) => {
// 	sendPiao({ projectId: row.projectId, treatyId: row.treatyId }).then((res) => {
// 		row.mailFlag = 1
// 		proxy.$modal.msgSuccess('提示成功!')
// 	})
// }
</script>
<style lang="scss" scoped>
.row {
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	padding: 5px 0 10px 0;
	.left-label {
		color: #33b6fe;
		height: 24px;
		line-height: 24px;
		position: relative;
		top: 1px;
		margin-right: 10px;
		display: inline-block;
		min-width: 80px;
	}
}
</style>
